<template>
	<view class="fui-wrap" :style="`padding-bottom:${safebottom?safebottom+120:150}rpx;`">
		<fui-sticky zIndex="1">
			<view style="background-color: #fff;">
				<fui-segmented-control @click="changeSegmented" :current="current" color="#000" activeColor="#0a8cdd" type="text" :values="segmented"></fui-segmented-control>
			</view>
		</fui-sticky>
		<fui-form labelColor="#7a7a7a" ref="form" top="0" :model="formData" :show="false">
			<view v-show="current===0">
				<fui-form-item label="商户名称" asterisk prop="merch_name">
					<fui-input placeholder="请输入商户名称" :borderBottom="false" :padding="[0]" v-model="formData.merch_name"></fui-input>
				</fui-form-item>
				<fui-form-item label="商户电话" asterisk prop="phone">
					<fui-input placeholder="请输入商户电话" :borderBottom="false" :padding="[0]" v-model="formData.phone"></fui-input>
				</fui-form-item>
				<fui-form-item label="用户名" asterisk prop="username">
					<fui-input placeholder="请输入用户名" :borderBottom="false" :padding="[0]" v-model="formData.username">
						<template v-slot:left>
							<view style="padding-right: 10rpx;">{{uniqid}}-</view>
						</template>
						<fui-text text="复制" color="black" :size="28" decoration="underline" @click="copy"></fui-text>
					</fui-input>
				</fui-form-item>
				<fui-form-item label="密码" :asterisk="formData.id?false:true" prop="password">
					<fui-input placeholder="请输入密码" type="password" :borderBottom="false" :padding="[0]" v-model="formData.password"></fui-input>
				</fui-form-item>
				<fui-form-item label="绑定微信" arrow prop="rules_id">
					<view class="third" @click="$navigateTo('parking/wechat')">
						<fui-tag style="margin-right: 10rpx;" theme="light" :closeable="true" v-for="(t,i) in formData.third" :key="i" :text="t.openname">
							<view class="fui-close__icon" @click.stop="delThird(i)">&times;</view>
						</fui-tag>
					</view>
					<text @click="$navigateTo('parking/wechat')" style="color: #ddd;position: absolute;right: 80rpx;top: 0rpx;" v-if="formData.third.length===0">未绑定</text>
				</fui-form-item>
				<fui-form-item label="自营商户" prop="is_self">
					<fui-radio-group name="radio" v-model="formData.is_self">
						<view class="fui-list__item">
							<fui-label style="width: 35%;">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="1"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">是</text>
								</view>
							</fui-label>
							<fui-label style="width: 50%;">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="0"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">否</text>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</fui-form-item>
				<fui-form-item label="状态" prop="status">
					<fui-radio-group name="radio" v-model="formData.status">
						<view class="fui-list__item">
							<fui-label style="width: 35%;">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="normal" checked></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">正常</text>
								</view>
							</fui-label>
							<fui-label style="width: 50%;">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="hidden"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">禁用</text>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</fui-form-item>
			</view>
			<view v-show="current===1">
				<fui-form-item label="支持免减类型" :labelWidth="250" prop="coupon">
					<fui-checkbox-group name="radio" v-model="formData.coupon">
						<view>
							<fui-label v-for="(title,id) in coupon" :key="id" :margin="['16rpx','0','16rpx','0']">
								<view class="fui-align__center">
									<fui-checkbox scaleRatio="0.8" borderRadius="6rpx" :value="id" checked></fui-checkbox>
									<text style="margin-left: 10rpx;" class="fui-text">{{title}}</text>
								</view>
							</fui-label>
						</view>
					</fui-checkbox-group>
				</fui-form-item>
				<fui-form-item label="结算方式" :labelWidth="250" arrow prop="settle_type">
					<fui-input readonly @click="showSettleType=true" :borderBottom="false" :padding="[0]" :value="settle_type[formData.settle_type]"></fui-input>
				</fui-form-item>
				<fui-form-item asterisk label="单位价格" :labelWidth="250" prop="price" v-if="formData.settle_type=='time'">
					<fui-input type="digit" :borderBottom="false" :padding="[0]" v-model="formData.price">
						<text>元/小时</text>
					</fui-input>
				</fui-form-item>
				<fui-form-item asterisk label="累加时间" :labelWidth="250" prop="price_time" v-if="formData.settle_type=='time'">
					<fui-input type="number" :borderBottom="false" :padding="[0]" v-model="formData.price_time">
						<text>分钟</text>
					</fui-input>
				</fui-form-item>
				<fui-form-item asterisk label="允许最多欠费" :labelWidth="250" prop="allow_arrears" v-if="formData.settle_type=='before' || formData.settle_type=='after'">
					<fui-input type="number" :borderBottom="false" :padding="[0]" v-model="formData.allow_arrears">
						<text>元</text>
					</fui-input>
				</fui-form-item>
				<fui-form-item label="允许静态码" prop="static_able" :labelWidth="250">
					<fui-radio-group name="radio" v-model="formData.static_able">
						<view class="fui-list__item">
							<fui-label style="width: 35%;">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="1"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">是</text>
								</view>
							</fui-label>
							<fui-label style="width: 50%;">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" :value="0"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">否</text>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</fui-form-item>
				<fui-form-item asterisk label="静态码有效期" :labelWidth="250" prop="static_expire" v-if="formData.static_able==1">
					<fui-input type="number" :borderBottom="false" :padding="[0]" v-model="formData.static_expire">
						<text>天</text>
					</fui-input>
				</fui-form-item>
			</view>
		</fui-form>
		<view class="fui-btn__box" :style="`bottom: ${safebottom || 30}rpx;`">
			<fui-button :disabled="disabledButton" text="提交" bold @click="submit"></fui-button>
		</view>
		<fui-picker :fields ="['title','id']" :layer="1" :linkage="true" :options="parseColumns(settle_type)" :show="showSettleType" @change="changePicker" @cancel="cancelPicker"></fui-picker>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {getUniqid} from '@/utils/util.js';
	export default {
		data() {
			return {
				baseUrl:baseUrl,
				safebottom:0,
				segmented:['基础信息','业务信息'],
				current:0,
				formData:{
					id:'',
					merch_name:'',
					phone:'',
					username:'',
					password:'',
					third:[],
					is_self:0,
					status:'normal',
					coupon:[],
					settle_type:'before',
					price:4,
					price_time:30,
					allow_arrears:0,
					static_able:0,
					static_expire:7
				},
				coupon:{},
				settle_type:{},
				uniqid:'',
				showSettleType:false,
				disabledButton:false
			}
		},
		onLoad(e) {
			this.getInfo();
			if(e.merch_id){
				this.$get('parking/merch/detail',{merch_id:e.merch_id},true).then(res=>{
					this.formData=res;
				});
			}else{
				uni.setNavigationBarTitle({
					title:'添加商户'
				});
			}
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom*2;
			  }
			});
		},
		onShow() {
			let third=uni.getStorageSync('third') || '';
			if(third){
				this.formData.third.push(third);
				uni.setStorageSync('third','');
			}
		},
		methods: {
			...methods,
			copy:function(){
				uni.setClipboardData({
					data: this.uniqid+'-'+this.formData.username,
				    success: function () {
				      uni.showToast({
				        title: '复制成功',
				        icon: 'none',
				        duration: 2000
				      });
				    }
				});
			},
			changeSegmented:function(e){
				this.current=e.index;
			},
			parseColumns:function(data){
				let r=[];
				for(let key in data){
					r.push({
						id:key,
						title:data[key]
					});
				}
				return r;
			},
			delThird:function(index){
				this.formData.third.splice(index,1);
			},
			getInfo:function(){
				this.$get('parking/merch/info').then(res=>{
					this.coupon=res.coupon;
					this.settle_type=res.settle_type;
					this.uniqid=res.uniqid;
				});
			},
			changePicker:function(e){
				if(this.showSettleType){
					this.formData.settle_type=e.value;
					this.showSettleType=false;
				}
			},
			cancelPicker:function(){
				this.showSettleType=false;
			},
			submit:function(){
				let rules = [
					{
						name: "merch_name",
						rule: ["required"],
						msg: ["请输入商户名称"]
					},
					{
						name: "phone",
						rule: ["required"],
						msg: ["请输入商户电话"]
					},
					{
						name: "username",
						rule: ["required"],
						msg: ["请输入用户名"]
					}
				];
				if(!this.formData.id){
					rules.push({
						name: "password",
						rule: ["required"],
						msg: ["请输入密码"]
					});
				}
				rules.push({
					name: "coupon",
					validator:[
						{msg:'请至少选择一项免减类型',method:function(e){
							if(e.length===0){
								return false;
							}
							return true;
						}}
					]
				});
				if(this.formData.settle_type=='before' || this.formData.settle_type=='after'){
					rules.push({
						name: "allow_arrears",
						rule: ["required"],
						msg: ["请输入允许最多欠费"]
					});
				}
				if(this.formData.settle_type=='time'){
					rules.push({
						name: "price",
						rule: ["required"],
						msg: ["请输入单位价格"]
					});
					rules.push({
						name: "price_time",
						rule: ["required"],
						msg: ["请输入累加时间"]
					});
				}
				if(this.formData.static_able=='1'){
					rules.push({
						name: "static_expire",
						rule: ["required"],
						msg: ["请输入静态码有效期"]
					});
				}
				this.disabledButton=true;
				this.$refs.form.clearValidate();
				this.$refs.form.validator(this.formData,rules,true).then(res => {
					if (res.isPassed) {
						this.$post('parking/merch/edit',this.formData,true,true).then(res=>{
							if(this.formData.id){
								uni.setStorageSync('refresh',1);
								this.$navigateBack(1500);
							}else{
								console.log(this.formData.is_self)
								this.$redirectTo('parking/merch/list?ziying='+this.formData.is_self,1500);
							}
						}).catch(err=>{
							this.disabledButton=false;
						});
					}else{
						this.disabledButton=false;
					}
				}).catch(err => {
					this.disabledButton=false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-list__item{
	display: flex;
	width: 100%;
}
.fui-btn__box{
	position: fixed;
	width: 96%;
	left: 2%;
	z-index: 1;
}
.third{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	min-height:48rpx;
	text{
		margin-right: 10rpx;
	}
}
.fui-close__icon {
	display: flex;
	align-items: center;
	margin-left: 20rpx;
	color:red
}
</style>